import React,{Component} from 'react';
import { Icon, Input, Button, Table, Pagination } from 'antd';
import './index.css';
import axios from 'axios';
import Tips from '../../Tips/index'
import Detail from './detail'
import { connect } from 'react-redux';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

const secretType={
	1:'普通证书',
	2:'高级证书'
}
class KeyManagement extends React.Component {
	constructor(props){
		super(props)
		this.state = {
		date: "",
		data: [],
		page: 1,
		limit: 10,
		totalnum: 0,
		message: "",
		update: false,
		visible: false,
		joinnetworkvisible: false
		};
	}
	componentWillMount(){
		this.getData(this.state.page,this.state.limit)
		this.ismounted=true
	}
	componentWillUnmount(){
			this.ismounted=false
		}
	componentWillUpdate(nextprops){
		if(nextprops.changeOrgid!=this.props.changeOrgid){
			this.getData(this.state.page,this.state.limit,nextprops.changeOrgid)
		}	
	}
	
	columns = [{
		title : '密钥名称',
		dataIndex: '密钥名称',
		key: '密钥名称',
		// width: 140,
	  }, {
		title: '密钥类型',
		dataIndex: '密钥类型',
		key: '密钥类型',
		// width: 100,
	  }, {
		title: '创建时间',
		dataIndex: '创建时间',
		key: '创建时间',
		// width: 100,
	  }, {
		title: '匹配证书',
		dataIndex: '匹配证书',
		key: '匹配证书',
		// width: 150,
	  },
		 {
			title : '公钥',
			key : '公钥',
			width: 230,
			render: (text, record) => (
				<span className="controlnet">
					<span className="datailnet" size="small" onClick={this.detailshowModal.bind(this, text, record)} >查看公钥</span>
				</span>
			),
		}
	];
	stateData = {
		page:['1','2','10','20','30','40','50','60','70','80','90']
	}
	detailshowModal = (text) => {
		this.setState({ detailvisible : true ,publicKeydata:text});
	}
	detailhandleChancel=()=>{
		this.setState({
            detailvisible: false,
        });
	}

	onShowSizeChange=(current, pageSize)=> {
	this.getData( current, pageSize )
	this.setState({
		limit:pageSize,
		page:current
	})
}
 onChange=(pageNumber)=> {
	this.getData( pageNumber )
}
getData = (page,limit=this.state.limit,changeOrgid=this.props.changeOrgid)=>{
	const $this = this
	if (!changeOrgid) return
		this.setState({
			message: 'loading'
		})
	
		const Token = localStorage.getItem("token");
		axios({
			method: 'get',
			url: '/api/block/baas/Ca/queryAllBaasCa',
			headers: {
				'Content-Type': 'application/json',
				Authorization: Token
			},
			params: {  orgId: changeOrgid, limit: limit, page: page  }
		})
			.then(function (response) {
				if($this.ismounted){
				let data = [
				]
				response.data && response.data.data && response.data.data.rows && response.data.data.rows.forEach((e, i) => {
					data.push({
						key: i + '',
						"密钥名称": e.secretName,
						"密钥类型": secretType[e.secretType],
						"创建时间": e.creatTime,
						"匹配证书": e.certId,
						pubilckey: e.publicKey,
					})
				})

				$this.setState({
					data: data,
					totalnum: response.data && response.data.data && response.data.data.total ? response.data.data.total : 0,
					message: ''
				})
			}
			})
			.catch(function (error) {
				if($this.ismounted){
				var message = '请求失败，请稍后重试'
				if (error === []) message = ''
				$this.setState({
					message: message
				}, () => {
					setTimeout(() => {
						$this.setState({
							message: '',
						})
					}, 1000)
				})
				}
			});
  }
	
	render() {

		
		return (
				<div>
				{/* <div className="inviteUserBox searchbox">
					<Input placeholder="请输入密钥名称" className="input" onChange={this.changesearch} />
					<Button type="primary" className="search" onClick={this.search}><img src={require('./img/search_icon.png')} /></Button>
				</div> */}
					<Table className="netTable" columns={this.columns} dataSource={this.state.data} bordered  Paginatio={this.onShowSizeChange} pagination={false} />
					<div className="page_foot">
								<span className="data_num">共{this.state.totalnum}条</span>
								<Pagination pageSizeOptions={this.stateData.page}  className="page" showSizeChanger showQuickJumper onShowSizeChange={this.onShowSizeChange} defaultCurrent={1} total={this.state.totalnum} onChange={this.onChange} />			
					</div>
					<Detail
								visible={this.state.detailvisible}
								onCancel={this.detailhandleChancel}
								title={this.state.title}
								inviteshowModal={this.inviteshowModal}
								detaildata={this.state.publicKeydata}
					/>
					<Tips message={this.state.message} />
				</div>			
			);
		}
	}



	export default connect((state)=>{
		return {...state};
		})(KeyManagement);
